<script>
document.addEventListener("DOMContentLoaded", function () {
  const slideImgs = document.querySelectorAll(".sigmaweb-slide-img");
  const detailVideo = document.querySelector("#sigmaweb-detail-video video");
  const detailName = document.querySelector("#sigmaweb-detail-name span");
  const detailPosition = document.querySelector("#sigmaweb-detail-year span");
  const lightbox = document.querySelector("#sigmaweb-lightbox");
  const lightbox_Video = document.querySelector(
    "#sigmaweb-lightbox-video video"
  );

  slideImgs.forEach(function (slide) {
    slide.addEventListener("click", function () {
      // حذف active از همه تصاویر
      document
        .querySelectorAll(".sigmaweb-slide-img img")
        .forEach(function (img) {
          img.classList.remove("active");
        });


      const imgElement = this.querySelector("img");
      const videoSrc = this.getAttribute("data-video");
      const slide_name = this.getAttribute("data-name");
      const slide_position = this.getAttribute("data-year");
	  const imgSrc = imgElement.getAttribute("src");
	  
      imgElement.classList.add("active"); 
      detailVideo.setAttribute("src", videoSrc);
	  detailVideo.setAttribute("poster", imgSrc);
      detailVideo.load();

      detailName.textContent = slide_name;
      detailPosition.textContent = slide_position;


      detailVideo.classList.add("animate-scale");
      setTimeout(() => {
        detailVideo.classList.remove("animate-scale");
      }, 300);
    });
  });

  // لایت باکس
  function isMobile() {
    return window.innerWidth <= 768;
  }

  if (isMobile()) {
    detailVideo.addEventListener("play", function () {
      lightbox.classList.add("active");
      document.body.classList.add("sigmaweb-video-lightbox");
      const videoSrcLightbox = this.getAttribute("src");
	  const imgActiveElement = document.querySelector(".sigmaweb-slide-img img.active");
      const imgSrc = imgActiveElement.getAttribute("src");
      lightbox_Video.setAttribute("src", videoSrcLightbox);
      lightbox_Video.setAttribute("poster", imgSrc);
      detailVideo.pause();
    });

    lightbox_Video.addEventListener("ended", function () {
      lightbox.classList.remove("active");
      document.body.classList.remove("sigmaweb-video-lightbox");
      lightbox_Video.pause();
      lightbox_Video.currentTime = 0;
      lightbox_Video.removeAttribute("src");
      lightbox_Video.removeAttribute("poster");
    });

    window.addEventListener("click", (event) => {
      if (event.target === lightbox) {
        lightbox.classList.remove("active");
        document.body.classList.remove("sigmaweb-video-lightbox");
        lightbox_Video.pause();
        lightbox_Video.currentTime = 0;
        lightbox_Video.removeAttribute("src");
        lightbox_Video.removeAttribute("poster");
      }
    });
  }

  // مقداردهی اولیه با اولین اسلاید
  const firstSlide = slideImgs[0];
  const firstImg = firstSlide.querySelector("img");
  const firstVideoSrc = firstSlide.getAttribute("data-video");
  const firstName = firstSlide.getAttribute("data-name");
  const firstYear = firstSlide.getAttribute("data-year");
  const firstImgSrc = firstImg.getAttribute("src");

  firstImg.classList.add("active");
  detailVideo.setAttribute("src", firstVideoSrc);
  detailVideo.setAttribute("poster", firstImgSrc);
  detailVideo.load();
  detailName.textContent = firstName;
  detailPosition.textContent = firstYear;
});
</script>